<template>
    <div class="orderListRuleForm">
        <panle title='推广员审批' content="推广员审批"></panle>
        <!--搜索-->
        <el-form :inline="true" ref="form" :model="form" label-width="100px" class="demo-form-inline">
            <el-form-item label="申请时间" prop="apply_for_time">
                <el-date-picker
                    v-model="form.apply_for_time"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="姓名:" prop="user_name">
                <el-input size="mini" placeholder="请输入" v-model="form.user_name"></el-input>
            </el-form-item>
            <el-form-item label="推荐人:" prop="popu_user_name">
                <el-input size="mini" placeholder="请输入" v-model="form.popu_user_name"></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
                <el-select v-model="form.status" placeholder="请选择" size="mini">
                    <el-option label="申请中" value="0"></el-option>
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="拒绝" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="级别:" prop="popu_level">
                <el-select v-model="form.popu_level" placeholder="请选择" size="mini">
                    <el-option label="一级推广员" value="1"></el-option>
                    <el-option label="二级推广员" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
            </el-form-item>
        </el-form>
        <!--列表-->
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="user_name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="level" label="级别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.level == 1">一级</span>
                        <span v-else>二级</span>
                    </template>
                </el-table-column>
                <el-table-column prop="popu_name" label="推荐人"></el-table-column>
                <el-table-column prop="status" label="申请状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0">申请中</span>
                        <span v-else-if="scope.row.status == 1">通过</span>
                        <span v-else>拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column prop="apply_for_time" label="申请时间"></el-table-column>
                <el-table-column prop="id" label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <PersButton type="text" size="mini" label="通过" icon="fa  fa-pencil" perms="sell:examine:true" @click="examineApplyUser(scope.row,1)"></PersButton>
                            <PersButton type="text" size="mini" label="拒绝" icon="fa  fa-pencil" perms="sell:examine:false" @click="examineApplyUser(scope.row,2)"></PersButton>
                        </div>
                        <span v-if="scope.row.status == 1 || scope.row.status == 2">-</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleExamineSizeChange" @current-change="handleExamineCurrentChange"
                               :current-page="form.pageExamineNumber" :page-sizes="[10, 50, 100, 200]"
                               :page-size="form.pageExamineSize"
                               background layout="total, sizes, prev, pager, next, jumper"
                               :total="form.examineTotal">
                </el-pagination>
            </div>
        </div>
        <!--同意/拒绝弹框-->
        <el-dialog :visible.sync="examineOpen" :before-close="handleClose" width="1000px" append-to-body title="审核">
            <span v-if="examineForm.status == 1">确定通过该推广员申请？</span>
            <span v-if="examineForm.status == 2">确定拒绝该推广员申请？</span>
            <el-form ref="examineForm" :model="examineForm" style="margin-top:10px">
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="备注：" prop="remark">
                            <el-input type="textarea" size="mini" class="w260" v-model="examineForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="submitExamineApplyForm('examineForm') " size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getList,operation
} from "@/api/sell/examine/examine";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import {mapState} from "vuex";

export default {
    name:'Examine',
    components: {
        Panle,
        PersButton,
    },
    computed:{
        ...mapState({
            userInfo: state => state.member.userInfo,
        }),
    },
    data() {
        return {
            loading:false,
            examineOpen: false, //审核弹框是否显示
            quitOpen:false, //离职确认是否显示
            form: {
                apply_for_time:[],
                user_name:'',
                popu_user_name:'',
                status:'',
                popu_level:'',
                pageExamineSize: 10,
                pageExamineNumber: 1,
                examineTotal: 0,

            },
            examineForm:{
                'status':'',
                'remark':'', //同意理由
                'id':''
            },
            tableData:[]
        }
    },
    created() {
        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            this.form.page = this.form.pageExamineNumber;
            this.form.size = this.form.pageExamineSize;
            getList(this.form).then((res) => {
                this.tableData = res.data.data;
                this.form.examineTotal = res.data.total;
                this.loading = false;
            })
        },

        //操作后初始化
        initPopu(){
            this.examineForm.status = '';
            this.examineForm.remark = '';
            this.examineForm.id = '';
        },

        //关闭弹框回调
        handleClose(){
            this.examineOpen = false;
            this.initPopu();
        },

        search: function () {
            this.loading = true;
            this.form.pageExamineSize = 10;
            this.form.pageExamineNumber = 1;
            this.init();
        },
        handleExamineSizeChange: function (e) {
            this.form.pageExamineSize = e;
            this.init();
        },
        handleExamineCurrentChange: function (e) {
            this.form.pageExamineNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.apply_for_time = [];
            this.form.user_name = '';
            this.form.popu_user_name = '';
            this.form.status = '';
            this.form.popu_level = '';
            this.init();
        },
        //同意/拒绝申请人
        examineApplyUser:function (data,status){
            this.examineOpen = true;
            this.examineForm.status = status;
            this.examineForm.id = data.id;
        },
        //同意/拒绝申请人提交
        submitExamineApplyForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    operation(this.examineForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.examineOpen=false;
                            this.init();
                            this.initPopu();
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        }
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}

.create_link{
    margin-top: 7px;
    float: right;
}

.w50{
    width: 50px !important;
}
.w60{
    width: 60px !important;
}
.w260{
    width: 260px !important;
}
.mr20{
    margin-right: 20px;
}
</style>
